<template>
  <div>
    <tableHeader />
    <el-card>
      <div class="business_info">
        <!-- 企业详情 -->
        <el-card class="business_info-card lg-mb-20">
          <template #header>
            <div class="card-header">
              <span>企业详情</span>
              <!-- <el-button class="button" type="primary">+编辑</el-button> -->
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <div class="detail">
                <el-descriptions
                  :size="size"
                  :column="3"
                  border
                  direction="vertical"
                >
                  <el-descriptions-item
                    label="单位名称"
                    label-align="left"
                    align="center"
                    label-class-name="my-label"
                    class-name="my-content"
                    >{{ business.item.name }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="所属行业"
                    label-align="left"
                    align="center"
                    >{{ business.item.type }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="企业地址"
                    label-align="left"
                    align="center"
                    >{{ business.item.addr }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="企业社会信用代码"
                    label-align="left"
                    align="center"
                    >{{ business.item.creditCode }}
                  </el-descriptions-item>
                  <el-descriptions-item label-align="left" align="center"
                    ><template #label>
                      <div class="cell-item">
                        <el-icon :style="iconStyle">
                          <user />
                        </el-icon>
                        联系人
                      </div>
                    </template>
                    {{ business.item.user }}
                  </el-descriptions-item>
                  <el-descriptions-item label-align="left" align="center">
                    <template #label>
                      <div class="cell-item">
                        <el-icon :style="iconStyle">
                          <iphone />
                        </el-icon>
                        联系方式
                      </div>
                    </template>
                    {{ business.item.tel }}
                  </el-descriptions-item>
                  <!-- <el-descriptions-item
                    label="业务银行"
                    label-align="left"
                    align="center"
                    >{{ business.item.bank }}
                  </el-descriptions-item> -->
                  <!-- <el-descriptions-item
                    label="银行业务负责人"
                    label-align="left"
                    align="center"
                    >{{ business.item.bank_manager }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="业务银行负责人联系方式"
                    label-align="left"
                    align="center"
                    >{{ business.item.bank_tel }}
                  </el-descriptions-item> -->
                  <el-descriptions-item
                    label="所属区域"
                    label-align="left"
                    align="center"
                    >{{ business.item.regionName }}
                  </el-descriptions-item>

                  <el-descriptions-item
                    label="创建时间"
                    label-align="left"
                    align="center"
                    >{{ business.item.createTime }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <!-- 企业下接入设备列表 -->
        <el-card class="business_devices-card lg-mb-20">
          <template #header>
            <div class="card-header">
              <span>企业接入设备列表</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <BusinessDevices />
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { provide, computed, reactive, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import tableHeader from "./tableHeader.vue";
import { useBusiness } from "@/store/backend/BusinessM/info";
import BusinessDevices from "./businessDevices.vue";
import { useNavTabs } from "@/store/navTabs";

const navTabs = useNavTabs();
const router = useRouter();
const business = useBusiness();
const size = ref("");

const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap.default,
  };
});
interface anyObj {
  [key: string]: any;
}
const state: {
  deviceList: anyObj;
  currentPage: number;
  pageSize: number;
  total: number;
} = reactive({
  deviceList: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

type DeviceItem = {
  avatar: string;
  equipid: number;
  morestatus: number;
  name: string;
  status: number;
};

onMounted(() => {});

provide("navTabs", navTabs);
</script>
<style lang="scss" scoped>
.business_info {
  &-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .business_devices-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.el-descriptions {
  margin: 20px 0;
}
.cell-item {
  display: flex;
  align-items: center;
}
.lg-mb-20 {
  margin-bottom: 20px;
}
</style>
